<template>
  <div class="dd">
        <my-header title="订单"></my-header>
        <main class="main">
            <figure>
                <img src="//fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif"/>
            </figure>
            <h3>登陆后查看外卖订单</h3>
            <button>立即登录</button>
        </main>
  </div>
</template>
<script>
import myHeader from '@/components/myHeader'
export default {
  components: {
    myHeader
  }
}
</script>
<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}

.dd{
    width: 100%;
    height: 100vh;
     background: #f5f5f5;
    .main{
        width: 100%;
   
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    figure{
           width: 50%;
            .pxToRem(margin-top,300); 
        img{
            width: 100%;
        }
    }
    h3{
         .pxToRem(margin-top, 20);
        color: #6a6a6a;
         .pxToRem(font-size,33);
    }
    button{
        .pxToRem( margin-top, 20);
        padding: 2% 5%;
        background: #56d176;
        color: #fff;
        border: none;
       outline: none;
    }
    }
}
</style>
